<template>
  <div class="headerStyle">
     <div class="hstyle leftDiv">
       <div class="logo">
         <img src="../../assets/logo/logo.png" alt="">
       </div>
       <div class="weather">
         <div>
           {{ yearTime }}<br>
           {{monthTime}}{{dayTime}}{{zhouji}}
         </div>
         <div>
           {{ currentTime }}
         </div>
       </div>
     </div>
     <div class="hstyle titleSpan">
        {{title}}
     </div>
     <div class="hstyle rightDiv">

       <div class="shijian">
         <div>
           <div class="weatherP" id="he-plugin-simple"></div>
         </div>
       </div>
       <div class="nameStyle">
         <i class="el-icon-user" style="color: #0380F3;font-weight: bold;font-size: 1.5rem;"></i>
         <span class="ml10 userName">{{ userName }}</span>
       </div>
     </div>
  </div>
</template>
<script>
export default {
  name: "Index",
  data() {
    return {
      title:'江北公用数字智慧平台',
      yearTime:'',
      monthTime:'',
      dayTime:'',
      currentTime:'',
      userName:'admin'
    };
  },
  mounted() {
// 在组件挂载后执行第三方库的初始化代码
    // 创建 script 标签
    const script = document.createElement('script');
    script.src = "https://widget.qweather.net/simple/static/js/he-simple-common.js?v=2.0";
    script.async = true;
    script.onload = () => {
      // 脚本加载完成后执行初始化函数
      this.initWeatherWidget();
    };

    // 将 script 标签添加到文档中
    document.body.appendChild(script);
    // 在组件挂载后立即更新时间
    this.updateTime();
    // 每秒更新一次时间
    setInterval(this.updateTime, 1000);

  },
  methods: {
    // hefeng 天气
    initWeatherWidget() {
      // 在这里初始化天气插件
      window.WIDGET = {
        CONFIG: {
          // 天气插件的配置参数
          "modules": "024",
          "background": "5",
          "tmpColor": "FFFFFF",
          "tmpSize": "16",
          "cityColor": "FFFFFF",
          "citySize": "16",
          "aqiColor": "FFFFFF",
          "aqiSize": "16",
          "weatherIconSize": "24",
          "alertIconSize": "18",
          "padding": "10px 10px 10px 10px",
          "shadow": "0",
          "language": "auto",
          "fixed": "false",
          "vertical": "top",
          "horizontal": "left",
          "city": "CN101011100",
          "key": "fcfc549d0e5d48118825b19ba63e5286"
        }
        }
      },
    //实时时间
    updateTime() {
      const now = new Date();
      // 更新年、月、日
      this.yearTime = now.getFullYear() + '年';
      this.monthTime = (now.getMonth() + 1).toString().padStart(2, '0') + '月';
      this.dayTime = now.getDate().toString().padStart(2, '0') + '日';
      // 更新当前时间
      this.currentTime = now.toLocaleTimeString();
    }

  }
};
</script>

<style scoped lang="scss">
.headerStyle {
  width: 100%;
  height: 100%;
  color: white;
  font-size: 20px;
  z-index: 9999;
  display: flex;
  background-image: url("../../assets/images/header.png");
  background-size: cover; /* 背景图片铺满并保持比例不变 */
  background-repeat: no-repeat; /* 不重复平铺 */
  background-position: center; /* 图片居中对齐 */
  margin: 0; /* 去除默认的外边距 */
  padding: 0; /* 去除默认的内边距 */
  .hstyle{
      flex: 1;
  }
  .logo{
    width: 8rem;
  }
  .titleSpan{
    font-family: HYYaKuHei, HYYaKuHei;
    font-weight: normal;
    font-size: 2rem;
    color: #F0F4FF;
    letter-spacing: 4px;
    text-shadow: 0px 5px 10px #001C34;
    font-style: normal;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .leftDiv{
    display: flex;

    .logo{
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      img{
        justify-content: center;
        align-items: center;
        width: 11rem;
        margin-top: 0.4rem;
      }
    }
    .weather{
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      div:nth-of-type(1){
        font-size: 1rem;
        color: #019DFF;
      }
      div:nth-of-type(2){
        font-size: 1.5rem;
        color: #B9E4FF;
      }

    }
    div:nth-of-type(2){
      display: flex;
      flex: 1;
      justify-content: left;
      align-items: center;
      img{
        justify-content: center;
        align-items: center;
        width: 11rem;
      }
    }

  }


  .rightDiv{
    display: flex;
    div:nth-of-type(1){
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      text-align: right;
      padding-left: 4rem;
      div:nth-of-type(1){
        font-size: 1.2rem;
        color: #019DFF;
      }
      div:nth-of-type(2){
        font-size: 1.5rem;
        color: #B9E4FF;
      }
    }
    div:nth-of-type(2){
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
    }
    .nameStyle{
      cursor: pointer;
    }
    .userName{
      color: white;
    }
  }



  .weatherP{

  }
}
</style>

